<script setup>
import {toRef} from "vue";
import {useStore} from "vuex";
import Home from "@/views/home.vue";
import about from "@/views/about.vue";

const store = useStore()
const count = toRef(store.state, "count")

const doubleCount = toRef(store.getters, "doubleCount")
const totalAge = toRef(store.getters, "totalAge")
const getUserById = toRef(store.getters, "getUserById")
const getDoubleTotalAge = toRef(store.getters, "getDoubleTotalAge")
const add = () => {
  store.dispatch("changeCountAction", count.value)
}
</script>
<template>
  <div class="layui-panel" id="App">
    <h1>App组件</h1>
    <h3>Store中的state的count的值：{{ count }}</h3>
    <h3>Store中的getter的doubleCount的值：{{ doubleCount }}</h3>
    <h3>Store中的getter的totalAge的值：{{ totalAge }}</h3>
    <h3>Store中的getter的totalAge放大10倍的值：{{ getDoubleTotalAge }}</h3>
    <h3>从Store中的查找id为1的对象：{{ getUserById(1) }}</h3>
    <h3>从Store中的查找id为1的对象的名字：{{ getUserById(1).name }}</h3>
    <button type="button" class="layui-btn" @click="add">从App组件中修改store中的count</button>
    <home></home>
    <about></about>
  </div>
</template>

<style lang="less">
.layui-panel {
  padding: 30px;
}
</style>
